<div class="pl-3 pr-3 bg-white">
    <h4>商品详情</h4>
    <ts-tabs [tabs]="['基本信息','商品规格']" [color]="global.params.color" [target]="tsTabs" activeTab="基本信息">
    </ts-tabs>
</div>
<div class="p-2">
    <div #tsTabs='tsTabs' tsTabs class="card">
        <div class="card-body">
            <div tsTab tab='基本信息'>
                <div class="border-bottom">
                    <div class="card-body">
                        <div class="container m-0">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">商品分类</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <select [(ngModel)]="goods.goodsParentType" class="custom-select" placeholder="请选择一级分类">
                                                <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                                            </select>
                                        </div>
                                        <div class="col">
                                            <select [(ngModel)]="goods.goodsType" class="custom-select" placeholder="请选择二级分类">
                                                <option *ngFor="let type of getChildTypes" [ngValue]="type.value">{{type.text}}</option>
                                            </select>
                                        </div>
                                        <div class="col">
                                            <select [(ngModel)]="goods.goodsType" class="custom-select" placeholder="请选择三级分类">
                                                <option *ngFor="let type of getChildTypes" [ngValue]="type.value">{{type.text}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">商品条形码</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入商品条形码">
                                            <div class="invalid-feedback">商品条形码必填的</div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">商品助记符</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入商品助记符" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">商品名称</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入商品的名称" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">商品简称</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入商品简称">
                                            <div class="invalid-feedback">商品简称必填的</div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">商品品牌</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入商品品牌" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">基本单位</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入基本单位" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">厂家货码</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入厂家货码">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">内部邮编</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入内部邮编" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">整箱条码</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入整箱条码" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">箱装单位</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入箱装单位">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">箱装数量</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入箱装数量" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-3 col-form-label text-center">保质期</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入整箱条码" type="text" class="form-control">
                                                </div>
                                                <span style="padding-top: 10px">/天</span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">二级单位</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入二级单位">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">二级条码</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入二级条码" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">换算数量</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入换算数量" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">二级单位</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入二级单位">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">二级条码</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入二级条码" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">换算数量</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入换算数量" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">商品标签</label>
                                <div class="col-sm-10 pt-2">
                                    <ts-checkbox class="mr-5" *ngFor="let sel of selectModules;index as i" color="secondary" [value]="i+1" [(ngModel)]="sel.name">{{sel.name}}</ts-checkbox>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">采购单价</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入采购单价">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">最高采购单价</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入最高采购单价" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">税率</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入税率" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">主供应商</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入主供应商">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">次供应商</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入次供应商" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">商品类型</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入商品类型" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">最低采购量</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入最低采购量">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">采购倍数</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入采购倍数" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">主存放仓库</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入主存放仓库" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right" style="font-weight: 900">售价管理</label>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">标准售价</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入标准售价">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">会员零售价</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入会员零售价" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">标准供货单价</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入标准供货单价" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">标准供货单价</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入标准供货单价">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">客户等价价</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入客户等价价" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">客户等级箱价</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入客户等级箱价" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">单位积分</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入单位积分">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">库存上限</label>
                                                <div class="col-sm-7" style="display: flex">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入库存上限" type="text" class="form-control">
                                                    <select class="custom-select" style="width: 60%">
                                                        <option value="1">箱</option>
                                                        <option value="2">包</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">库存下限</label>
                                                <div class="col-sm-8" style="display:flex">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入库存下限" type="text" class="form-control">
                                                    <select class="custom-select" style="width: 60%">
                                                        <option value="1">箱</option>
                                                        <option value="2">包</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">单位重量</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入单位重量">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">整箱重量</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入整箱重量" type="text" class="form-control">

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">单位体积</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入单位体积" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">整箱体积</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入整箱体积">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">单位重量误差</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入单位重量误差" type="text" class="form-control">

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">最大箱重误差</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入最大箱重误差" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">最大单品误差百分比</label>
                                <div class="col-sm-10">
                                    <div class="row">
                                        <div class="col">
                                            <input [(ngModel)]="goods.goodsPrice" type="text" class="form-control" placeholder="请输入最大单品误差百分比">
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-5 col-form-label text-center">一级经纪佣金</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入一级经纪佣金" type="text" class="form-control">

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-center">二级经纪佣金</label>
                                                <div class="col-sm-8">
                                                    <input [(ngModel)]="goods.goodsStocks" placeholder="请输入二级经纪佣金" type="text" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">是否上架</label>
                                <div class="col-sm-10 pt-2">
                                    <ts-switch [color]="global.params.color" [values]="{open:1,close:0}" [(ngModel)]="goods.isActive"></ts-switch>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="border-bottom">
                    <div class="card-body">
                        <div class="container m-0">
                            <!-- <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">商品缩略图</label>
                                <div class="col-sm-10">
                                    <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                </div>
                            </div> -->
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">商品图片</label>
                                <div class="col-sm-10">
                                    <ts-image-cards [(src)]="goods.goodsImages" [config]="options" title="点击选择"></ts-image-cards>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border-bottom">
                    <div class="card-body">
                        <div class="container m-0">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label label-required text-right">质检报告</label>
                                <div class="col-sm-10">
                                    <textarea [(ngModel)]="goods.goodsDetail" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-2 m-btn">
                    <button routerLink="/store/goods" tsBtn color="white">返回列表</button>
                    <button *ngIf="goods.id===0" tsBtn loading color="success" (submit)="confirmInsert($event)">确认添加</button>
                    <button tsBtn color="warning" (click)="resetForm()">添加新商品</button>
                    <button *ngIf="goods.id>0" tsBtn loading color="primary" (submit)="confirmUpdate($event)">确认修改</button>
                </div>
            </div>
            <div tsTab tab='商品规格'>
                <div class="border-bottom pb-2">
                    <div class="card-header pl-0 pt-0">规格类型</div>
                    <div class="mt-2" *ngFor="let goodsSpecification of goodsSpecifications;index as i">
                        <div class="input-group">
                            <input [(ngModel)]="goodsSpecification.specificationTitle" type="text" class="form-control" placeholder="请输入规格分类名称:颜色">
                            <div class="input-group-append">
                                <button (click)="addSpecificationChild(goodsSpecification)" class="btn btn-success" type="button">添加规格名称</button>
                                <button (click)="removeSpecification(i)" class="btn btn-danger" type="button">删除本规格</button>
                            </div>
                        </div>
                        <div class="mt-2 form-inline">
                            <div class="input-group mb-2 mr-2" *ngFor="let specificationName of goodsSpecification.specificationNames;index as j;trackBy trackFunc">
                                <div class="input-group-prepend">
                                    <button class="btn btn-white" type="button">{{j+1}}</button>
                                </div>
                                <input [(ngModel)]="goodsSpecification.specificationNames[j]" type="text" class="form-control">
                                <div class="input-group-append">
                                    <button (click)="removeSpecificationChild(goodsSpecification,j)" class="btn btn-white" type="button">
                                        <i class="iconfont icon-delete"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-2">
                        <button (click)="addSpecification()" tsBtn color="success">新增规格分类</button>
                        <!-- <button tsBtn color="info">刷新规格列表</button> -->
                    </div>
                </div>
                <div class="card-header pl-0">规格明细</div>
                <table class="table table-sm table-bordered text-center">
                    <thead>
                        <tr>
                            <th *ngFor="let goodsSpecification of goodsSpecifications">{{goodsSpecification.specificationTitle}}</th>
                            <th *ngFor="let th of defaultTh">{{th}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let tr of getSpecificationTr()">
                            <td *ngFor="let td of getSpecificationTd(tr)" [attr.rowspan]="td.rowspan">{{td.name}}</td>
                            <td>
                                <input [(ngModel)]="goodsSpecificationDetails[tr].goodsPrice" class="form-control" type="text">
                            </td>
                            <td>
                                <input [(ngModel)]="goodsSpecificationDetails[tr].goodsStocks" class="form-control" type="text">
                            </td>
                            <td>
                                <ts-switch [color]="global.params.color" [values]="{open:1,close:0}" [(ngModel)]="goodsSpecificationDetails[tr].isActive"></ts-switch>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="mt-2 m-btn">
                    <button routerLink="/store/goods" tsBtn color="white">返回列表</button>
                    <button tsBtn loading color="primary" (submit)="confirmSave($event)">保存规格</button>
                </div>
            </div>
        </div>
    </div>
</div>